import React, { memo } from 'react';
import { Row, Col, Card, Tabs, DatePicker } from 'antd';
import { FormattedMessage, formatMessage } from 'umi/locale';
import numeral from 'numeral';
import { instanceOf } from 'prop-types';
import styles from './Analysis.less';
import { Bar } from '@/components/Charts';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

// const customerRanking = [];
// for (let i = 0; i < 7; i += 1) {
//   rankingListData.push({
//     title: formatMessage({ id: 'app.analysis.test' }, { no: i }),
//     total: 323235,
//   });
// }

const compare = field => (a, b) => {
  const x = a[field];
  const y = b[field];
  return y - x;
};
const SalesCard = memo(
  ({
    rangePickerValue,
    salesData,
    customerRanking,
    isActive,
    handleRangePickerChange,
    loading,
    selectDate,
    userRegistNum,
  }) => (
    <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
      <div className={styles.salesCard}>
        <Tabs
          tabBarExtraContent={
            <div className={styles.salesExtraWrap}>
              <div className={styles.salesExtra}>
                <a className={isActive('today')} onClick={() => selectDate('today')}>
                  <FormattedMessage id="app.analysis.all-day" defaultMessage="All Day" />
                </a>
                <a className={isActive('week')} onClick={() => selectDate('week')}>
                  <FormattedMessage id="app.analysis.all-week" defaultMessage="All Week" />
                </a>
                <a className={isActive('month')} onClick={() => selectDate('month')}>
                  <FormattedMessage id="app.analysis.all-month" defaultMessage="All Month" />
                </a>
                <a className={isActive('year')} onClick={() => selectDate('year')}>
                  <FormattedMessage id="app.analysis.all-year" defaultMessage="All Year" />
                </a>
              </div>
              <RangePicker
                value={rangePickerValue}
                onChange={handleRangePickerChange}
                style={{ width: 256 }}
              />
            </div>
          }
          size="large"
          tabBarStyle={{ marginBottom: 24 }}
        >
          {/*销售额*/}
          <TabPane
            tab={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
            key="sales"
          >
            <Row>
              <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                <div className={styles.salesBar}>
                  <Bar
                    height={295}
                    showLabelFunc={(x, y) => ({
                      name: x,
                      value: y,
                    })}
                    title={
                      <FormattedMessage
                        id="app.analysis.sales-trend"
                        defaultMessage="Sales Trend"
                      />
                    }
                    data={salesData}
                  />
                </div>
              </Col>
              {/*用户下单量排名*/}
              <Col xl={8} lg={12} md={12} sm={24} xs={24}>
                <div className={styles.salesRank}>
                  <h4 className={styles.rankingTitle}>用户下单量排名</h4>
                  <ul className={styles.rankingList}>
                    {/*<div>{customerRanking?customerRanking[0]:"1"}</div>*/}
                    {customerRanking &&
                      customerRanking.slice(0, 7).map((item, i) => (
                        <li key={item.username}>
                          <span
                            className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}
                          >
                            {i + 1}
                          </span>
                          <span className={styles.rankingItemTitle} title={item.username}>
                            {item.username}
                          </span>
                          <span className={styles.rankingItemValue}>
                            {numeral(item.num).format('0,0')}
                          </span>
                        </li>
                      ))}
                  </ul>
                </div>
              </Col>
            </Row>
          </TabPane>
          {/*用户增长量*/}
          <TabPane
            tab={<FormattedMessage id="app.analysis.growthQuantity" defaultMessage="Visits" />}
            key="views"
          >
            <Row>
              <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                <div className={styles.salesBar}>
                  <Bar
                    height={292}
                    showLabelFunc={(x, y) => ({
                      name: x,
                      value: y,
                    })}
                    title={
                      <FormattedMessage
                        id="app.analysis.growthQuantity"
                        defaultMessage="Visits Trend"
                      />
                    }
                    data={userRegistNum}
                  />
                </div>
              </Col>
              {/*用户增长量*/}
              <Col xl={8} lg={12} md={12} sm={24} xs={24}>
                <div className={styles.salesRank}>
                  <h4 className={styles.rankingTitle}>用户增长排名</h4>
                  <ul className={styles.rankingList}>
                    {userRegistNum &&
                      userRegistNum
                        .slice(0, 7)
                        .sort(compare('y'))
                        .map((item, i) => (
                          <li key={item.x}>
                            <span
                              className={`${styles.rankingItemNumber} ${
                                i < 3 ? styles.active : ''
                              }`}
                            >
                              {i + 1}
                            </span>
                            <span className={styles.rankingItemTitle} title={item.x}>
                              {item.x}
                            </span>
                            <span>{item.y}</span>
                          </li>
                        ))}
                  </ul>
                </div>
              </Col>
            </Row>
          </TabPane>
        </Tabs>
      </div>
    </Card>
  )
);

export default SalesCard;
